<template>
  <Transition name="fade">
    <div v-show="aiSelectionBarShow && !aiChatInputShow" ref="aiSelectionBarRef"
      class="flex items-center absolute rounded-lg p-1 border" :style="{
        left: aiSelectionBarPosition.x + 'px',
        top: aiSelectionBarPosition.y + 'px',
        backgroundColor: 'var(--color-ai-selection-bar)',
        boxShadow: 'var(--shadow-ai-selection-bar)',
        borderColor: 'var(--color-ai-selection-bar-border)',
      }">
      <button @click="onAskAI"
        class="ui-button-ai text-sm font-medium px-2 py-1 rounded-md transition-colors duration-200 flex items-center cursor-pointer"
        :style="{
          color: 'var(--color-ai-selection-bar-text)',
        }">
        AI
      </button>
    </div>
  </Transition>
  <Transition name="fade">
    <UIAIChatInput closeable v-if="aiChatInputShow && aiSelectionBarShow" class="absolute min-w-150" :style="{
      left: aiSelectionBarPosition.x + 'px',
      top:
        aiSelectionBarPosition.type === 'top'
          ? aiSelectionBarPosition.y - 45 + 'px'
          : aiSelectionBarPosition.y + 'px',
    }" />
  </Transition>
</template>

<script lang="ts" setup>
const { setAiChatInputShow } = useAISelectionBar();
const { aiSelectionBarShow, aiChatInputShow, aiSelectionBarPosition } = useAISelectionBar()
const aiSelectionBarRef = useTemplateRef<HTMLDivElement>("aiSelectionBarRef");

onMounted(() => {
  aiSelectionBarRef.value!.addEventListener("mousedown", (e) => {
    e.preventDefault();
  });
});
const { createSpanActive } = useEditorAgent()
const onAskAI = () => {
  setAiChatInputShow(true);
  createSpanActive()
}
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
